<template>
  <el-container style="height: 100%">
    <el-aside width="80px" class="aside">
      <el-container style="height: 100%;">
        <el-header style="height: auto; padding: 0">
          <el-image class="drag" style="width: 80px; height: 80px" :src="url" fit="contain"/>
        </el-header>
        <el-main style="padding: 0">
          <el-scrollbar>
            <menu-top :menu-list="menuList" v-model:route-url="routeUrl"></menu-top>
          </el-scrollbar>
        </el-main>
        <el-footer style="height: auto; padding: 0">
          <el-scrollbar>
            <el-row>
              <el-col class="menu">
                <el-link @click="toPage('/sys/user')" :type="routeUrl === '/sys/user' ? 'success' : 'default'"
                         :underline="false" style="width: 100%;">
                  <el-row>
                    <el-col :span="24" style="text-align: center">
                      <el-badge is-dot type="info">
                        <el-avatar :size="40" shape="square" :src="circleUrl"/>
                      </el-badge>
                    </el-col>
                  </el-row>
                </el-link>
              </el-col>
              <el-col @click="toggleDark()" class="menu">
                <el-link :underline="false" style="width: 100%;">
                  <el-row>
                    <el-col :span="24" style="text-align: center">
                      <svg class="icon" aria-hidden="true" style="font-size: 1.2rem; ">
                        <use  :xlink:href="(isSun ? '#icon-night-mode' : '#icon-daytime-mode')"></use>
                      </svg>
                    </el-col>
                  </el-row>
                </el-link>
              </el-col>
              <el-col>
                <menu-top :menu-list="otherList" v-model:route-url="routeUrl" :icon-size="1.3"></menu-top>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-footer>
      </el-container>
    </el-aside>
    <el-container>
      <el-header height="40" style="padding: 0">
        <actionBar :tray="true"></actionBar>
      </el-header>
      <el-main>
        <router-view name="index"  v-slot="{ Component }">
          <keep-alive ref="keepAliveRef" :include="includeList">
            <component :is="Component" :key="route.name" v-if="route.meta.keepalive"/>
          </keep-alive>
          <component :is="Component" :key="route.name" v-if="!route.meta.keepalive"/>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {ref, unref, getCurrentInstance, watch, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRoute, useRouter} from "vue-router";
import {useDark, useToggle} from '@vueuse/core'
import websocket from "@renderer/utils/websocket";
import actionBar from "@renderer/components/actionBar/index.vue";
import menuTop from "@renderer/components/menuTop/index.vue";

export default {
  name: "index",
  props: ["info"],
  emits: ["update:info"],
  components: {actionBar,menuTop},
  setup(props, content) {
    const route = useRoute()
    const router = useRouter()
    const {proxy} = getCurrentInstance();

    const isDark = useDark()
    const toggleDark = useToggle(isDark)
    let data = {
      ifTop: ref(false),//是否置顶
      ifMax: ref(false),//是否最大化
      url: ref('../assets/icon.png'),//logo url
      isSun: ref(false),//是否是白天主题
      includeList: ref([]),//历史打开路由name
      circleUrl: ref('@resources/icon.png'),//头像url
      routeUrl: ref('/'),//路由url
      menuList: ref([
        {
          name: '首页',
          url: '/',
          icon: 'icon-home',
        },
        {
          name: '聊天',
          url: '/chat',
          icon: 'icon-message-comments',
          disabled: true,
        },
        {
          name: '通讯录',
          url: '/book',
          icon: 'icon-address-book',
          disabled: true,
        },
        {
          name: '工具箱',
          url: '/sys/tools',
          icon: 'icon-all',
        },
      ]),
      otherList: ref([
        {
          url: '/sys/setup',
          icon: 'icon-settings',
        },
        {
          url: '/sys/about',
          icon: 'icon-info',
        },
      ]),
    }
    //监听
    watch(() => isDark, (newVal, oldVal) => {
      if (data.isSun.value === newVal.value) {
        data.isSun.value = !newVal.value
      }
    }, {deep: true}) // 开启深度监听

    // window.electron.ipcRenderer.on('unmaximize', () => {
    //   data.ifMax.value = false
    // })
    //
    // window.electron.ipcRenderer.on('maximize', () => {
    //   data.ifMax.value = true
    // })
    onMounted(async () => {
      //如果未连接websocket
      if (!websocket.isConnection()){
        await websocket.connectWebsocket()
      }

      data.isSun.value = !isDark.value
    })
    let methods = {
      //窗口置顶
      top() {
        window.electron.ipcRenderer.send('top')
        data.ifTop.value = true
      },
      //取消置顶
      cancle_top() {
        window.electron.ipcRenderer.send('cancle_top')
        data.ifTop.value = false
      },
      //最小化
      min() {
        window.electron.ipcRenderer.send('min')
      },
      //最大化
      max() {
        window.electron.ipcRenderer.send('max')
        data.ifMax.value = true
      },
      //取消最大化
      cancel_max() {
        window.electron.ipcRenderer.send('cancel_max')
        data.ifMax.value = false
      },
      close() {
        ElMessageBox.confirm(
          '是否直接退出软件或最小化托盘?',
          '警告',
          {
            confirmButtonText: '最小化托盘',
            cancelButtonText: '直接退出',
            type: 'warning',
            distinguishCancelAndClose: true,
          }
        )
          .then(() => {
            methods.hide()
          })
          .catch((action) => {
            if (action === "cancel") {
              console.log('取消按钮')
              methods.destroy()
            } else if (action === "close") {
              console.log('关闭按钮')
            }
            this.$msgbox.close(); // 重点在这里
          })
      },
      //关闭
      destroy() {
        window.electron.ipcRenderer.send('destroy')
      },
      //关闭
      hide() {
        window.electron.ipcRenderer.send('hide')
      },
      toPage(url) {
        data.routeUrl.value = url
        router.push({
          path: url,
        })
      },
    }

    return {
      route,
      proxy,
      router,
      isDark,
      toggleDark,
      ...data,
      ...methods
    }
  }
}
</script>
<style lang="scss" scoped>
.aside {
  background-color: var(--el-color-info-light-5);
}

.menu {
  //margin-bottom: 10px;
  padding: 10px 0;
}


</style>

